import * as Cesium from "cesium";

export default class Bubble {
  constructor(val) {
    this.viewer = val.viewer
    this.div = document.createElement("div");
    // this.addDynamicLabel({id:1,position:val.position,title:"cl弹窗"});
  }

  /**
   * @description 添加弹框
   * @param data 当前的entity
   */
  addDynamicLabel(data) {
    let div = this.div
    div.id = data.id;
    //为弹框div添加类名，
    // 用于删除和设置样式
    div.className = "popup-box2";
    // div.style.display="inline"
    div.style.position = "relative";
    div.style.width = "300px";
    div.style.height = "30px";
    //这里我们再添加一个弹框的关闭按钮
    const closeButton = document.createElement("div");
    closeButton.style.position = "absolute";
    closeButton.style.top = "0";
    closeButton.style.right = "0";
    closeButton.style.cursor = "pointer";
    closeButton.className = "iconfont";
    closeButton.innerHTML="&#xe628;";
    closeButton.addEventListener('click', () => {
      data.billboard.image = "/src/assets/image/biao_ji.png";
      this.div.remove();
    });
    // <div style="position: absolute;top: 0;right: 0;cursor: pointer" className="iconfont">&#xe628;</div>
    let HTMLTable = `
            <div style="position:relative;background:#00ffef66;border: 1px solid #eee">
              ${data.text}
            </div>
        `;
    div.innerHTML = HTMLTable;
    div.appendChild(closeButton);

    this.viewer.cesiumWidget.container.appendChild(div);
    let gisPosition = data.position._value
    this.viewer.scene.postRender.addEventListener(() => {
      const canvasHeight = this.viewer.scene.canvas.height;
      const windowPosition = new Cesium.Cartesian2();
      Cesium.SceneTransforms.worldToWindowCoordinates(
        this.viewer.scene,
        gisPosition,
        windowPosition
      );
      div.style.bottom = canvasHeight - windowPosition.y + 110 + "px";
      const elWidth = div.offsetWidth;
      div.style.left = windowPosition.x - elWidth / 2 + "px";
    }, this);
  }

  clearDiv(id) {
    //获取所有popup-box类名的盒子
    const popupBoxDomList = document.querySelectorAll(".popup-box2");
    console.log(42, popupBoxDomList.length);
    //这里使用for的原因很简单，因为popupBoxDomList没有map等方法，你可以使用Array.form转为es6数组
    for (let i = 0; i < popupBoxDomList.length; i++) {
      popupBoxDomList[i].remove();
    }
    // popupBoxDomList.map((item)=>{
    //   item.remove();
    // });
    this.viewer.scene.postRender.removeEventListener(this.addDynamicLabel, this)
    // if(this.div){
    //   console.log(38, this.div.id);
    //   const popupDom = document.getElementById(this.div.id);
    //   console.log(39, popupDom);
    //   if(popupDom){
    //     popupDom.remove();
    //   }
    //
    //   // var parent = this.div.parentElement;
    //   // parent.removeChild(this.div);
    //   // this.div.removeNode(true);
    //
    // }

  }
}
